<template>
  <div>

	<myheader></myheader>

	<br /><br />

			<!--面包屑导航-->
			<Breadcrumb :datas="datas" ></Breadcrumb>



	<section class="featured-block text-center">
		<div class="container">


			<table>
					<tr >
						<td style="padding:5px;">

							用户名:

						</td>
						<td style="padding:5px;">

							<input type="text" v-model="username" />

						</td>
					</tr>

					<tr>
						<td style="padding:5px;">

							密码:

						</td>
						<td style="padding:5px;">

							<input type="password" v-model="password" />

						</td>
					</tr>
          <tr>
            <td style="padding:5px;">
              验证码：

            </td>
              <td style="padding:5px;">

                <input type="text" v-model="code"/>


            </td>
          </tr>
          <tr>
            <td style="padding:5px;">


              </td>
              <td style="padding:5px;">

                <img @click="changeimg" :src="src" alt="">

              </td>
              <td style="padding:5px;">



						</td>
          </tr>

					<tr>
						<td style="padding:5px;">


						</td>
						<td style="padding:5px;">

							<Button @click="submit">提交</Button> &nbsp;&nbsp;

							<Button @click="reset" color="green">重置</Button>

						</td>
					</tr>

			</table>



		</div>
	</section>





	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>


	</footer>

  </div>

</template>



<script>

//导包
import myheader from './myheader.vue';

export default {
  data () {
    return {
      msg: "这是一个变量",
      //声明面包屑变量
      datas:[{title:'首页',route:{name:'index'}},{title:'注册页面'}],
      username:'',
      password:'',
      code:'',
      src:'http://127.0.0.1:8000/mycode/'
    }
  },
  //注册组件标签
  components:{

  		'myheader':myheader

  },
  mounted:function(){



},
  methods:{


    //刷新验证码
    changeimg(){

      //随机字符串
      var num = Math.ceil(Math.random()*10);
      //赋值地址
      this.src = this.src + '?code=' + num;

    },

  	//重置
  	reset:function(){

  		this.username = '';
  		this.password = '';

  	},
  	//提交注册
  	submit:function(){

  		if(this.username == ''){

  			//alert('用户名不能为空');
  			this.$Message('用户名不能为空');
  			return false;
  		}

  		if(this.password == ''){

  			//alert('用户名不能为空');
  			this.$Message('密码不能为空');
  			return false;
  		}

  		//发送请求
  		this.axios.get('http://localhost:8000/register/',{params:{username:this.username,password:this.password,code:this.code}}).then((result) =>{

  						console.log(result);
  						this.$Message(result.data.message);


  		});



  	}


  }
}


</script>

<style>



</style>
